<template>
  <div>
    <el-form
      ref="formRef"
      :model="formData"
      :rules="rules"
      label-width="210"
      label-position="left"
    >
      <el-row style="display: flex; flex-direction: column">
        <el-form-item prop="countRuleId" label="取样编码规则" label-width="110">
          <el-select
            v-model="formData.countRuleId"
            placeholder="请选择取样编码规则"
            clearable
            @change="codingRulesChange"
            style="width: 300px"
          >
            <el-option
              v-for="item in codingRulesList"
              :key="item.id"
              :label="`${item.countRuleCode}`"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <p>
          过程能力趋势图中的点均高于
          <el-form-item
            prop="defaultTall"
            label-width="0"
            style="display: inline-block; margin: 0"
          >
            <el-input v-model="formData.defaultTall" style="width: 45px" />
          </el-form-item>
          并且过程能力连续
          <el-form-item
            prop="tallStopover"
            label-width="0"
            style="display: inline-block; margin: 0"
          >
            <el-input
              v-model="formData.tallStopover"
              style="width: 45px"
            /> </el-form-item
          >次高于
          <el-form-item
            prop="successiveTall"
            label-width="0"
            style="display: inline-block; margin: 0"
          >
            <el-input
              v-model="formData.successiveTall"
              style="width: 45px"
            /> </el-form-item
          >以上
        </p>
        <!-- 第二段文字 -->
        <p>
          过程能力趋势图中的点均低于
          <el-form-item
            prop="defaultLow"
            label-width="0"
            style="display: inline-block; margin: 0"
          >
            <el-input v-model="formData.defaultLow" style="width: 45px" />
          </el-form-item>
          并且过程能力连续
          <el-form-item
            prop="lowStopover"
            label-width="0"
            style="display: inline-block; margin: 0"
          >
            <el-input
              v-model="formData.lowStopover"
              style="width: 45px"
            /> </el-form-item
          >次呈持续下降趋势
        </p>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="当超过控制线上下限，是否预警">
            <el-switch
              v-model="formData.isWarn"
              inline-prompt
              active-value="1"
              inactive-value="0"
              active-text="是"
              inactive-text="否"
            />
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
            <el-form-item
              label="预警触发：超过预警控制线比率"
              prop="controlRate"
              :show-message="false"
            >
              <el-input v-model="formData.controlRate" style="width: 65px">
                <template #suffix> % </template>
              </el-input>
            </el-form-item>
          </el-col> -->
      </el-row>
    </el-form>
    <el-row style="max-width: 600px; display: flex; justify-content: end">
      <el-button type="primary" :loading="loading" @click="handleSubmit"
        >确 定
      </el-button>
      <el-button>取 消</el-button>
    </el-row>
  </div>
</template>
<script setup lang="ts">
import Common from "@/views/qms/pcm/pcmsystemconfig/components/common.vue";
import request from "@/utils/request";
defineOptions({
  name: "PCMSYSTEMCONFIGSTAGESYNTHESIS",
});

const baseUrl = "pcmconfigstage";

const rules = {
  countRuleId: [
    { required: true, message: "请选择取样编码规则", trigger: "change" },
  ],
  defaultTall: [
    { required: true, message: "请输入", trigger: "blur" },
    {
      pattern: /^\d*$/,
      message: "请输入数字",
      trigger: "blur",
    },
  ],
  defaultLow: [
    { required: true, message: "请输入", trigger: "blur" },
    {
      pattern: /^\d*$/,
      message: "请输入数字",
      trigger: "blur",
    },
  ],
  tallStopover: [
    { required: true, message: "请输入", trigger: "blur" },
    {
      pattern: /^\d*$/,
      message: "请输入数字",
      trigger: "blur",
    },
  ],
  successiveTall: [
    { required: true, message: "请输入", trigger: "blur" },
    {
      pattern: /^\d*$/,
      message: "请输入数字",
      trigger: "blur",
    },
  ],
  lowStopover: [
    { required: true, message: "请输入", trigger: "blur" },
    {
      pattern: /^\d*$/,
      message: "请输入数字",
      trigger: "blur",
    },
  ],
  escalateStopover: [
    {
      pattern: /^([0-9]{0,5})$/,
      message: "只能请输入五位正整数",
      trigger: ["blur", "change"],
    },
  ],
};
const formData = ref({
  controlRate: "",
  countRuleCode: "",
  countRuleId: "",
  createTime: "",
  createdUserId: "",
  createdUserName: "",
  deleted: "",
  enabled: "",
  id: "",
  ids: "",
  isWarn: "",
  lastUpdateTime: "",
  lastUpdatedUserId: "",
  lastUpdatedUserName: "",
  defaultTall: "",
  tallStopover: "",
  successiveTall: "",
  lowStopover: "",
  defaultLow: "",
});
onMounted(() => {
  getCodingRulesData();
  getCodingRulesChange();
});

// 获取编码规则列表
const codingRulesList = ref([]);
const getCodingRulesChange = async () => {
  await request({
    url: `dmpDosPcm/pcmconfigmeasurements/list?abilityType=3`,
    method: "get",
    data: { abilityType: 3 },
  }).then((res) => {
    codingRulesList.value = res.data;
    console.log("codingRulesList.value", codingRulesList.value);
  });
};
const codingRulesChange = (e) => {
  if (e) {
    codingRulesList.value.forEach((item) => {
      if (item.id === e) {
        formData.value.countRuleCode = item.countRuleCode;
      }
    });
    getCodingRulesChangeData(e);
  }
};
// 根据选择的编码规则获取内容
const getCodingRulesChangeData = async (countRuleCodeId: string) => {
  await request({
    url: `dmpDosPcm/pcmconfigstage/getByCountRuleCode/${countRuleCodeId}`,
    method: "get",
    data: {},
  }).then((res) => {
    formData.value = Object.assign(formData.value, res.data);
    formData.value.countRuleId = countRuleCodeId;
    codingRulesList.value.forEach((item) => {
      if (item.id === countRuleCodeId) {
        formData.value.countRuleCode = item.countRuleCode;
      }
    });
    console.log("formData.value", formData.value);
  });
};

// 进入页面获取首个生效的规则
const getCodingRulesData = async () => {
  await request({
    url: `/dmpDosPcm/pcmconfigstage/getByEnabled`,
    method: "get",
    data: {},
  }).then((res) => {
    console.log("res.data", res.data);
    formData.value = Object.assign(formData.value, res.data);
    console.log("formData.value", formData.value);
  });
};

const formRef = ref();
const loading = ref(false);
function handleSubmit() {
  formRef.value.validate(async (valid: any) => {
    if (valid) {
      console.log("formData.value", formData.value);

      loading.value = true;
      await request({
        url: `/dmpDosPcm/pcmconfigstage/save`,
        method: "post",
        data: formData.value,
      })
        .then(async () => {
          loading.value = false;
          ElMessage.success("修改成功");
        })
        .catch(() => {
          loading.value = false;
        });
    }
  });
}
</script>

<style scoped lang="scss"></style>
